<template>
  <div class="login">
    <img
      v-for="i in 1000"
      :key="i"
      style="width: 50px; height: 50px"
      src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
      alt=""
    />
    <div class="clik-area" @click="showNext">
      <div class="clik-area-bg"></div>
      <div class="clik-area-text">
        <br>
        <br>
        <br>
        <p class="text1">SongTaste</p>
        <br />
        <br />
        <br />
        <p class="text2">让我们用音乐倾听彼此</p>
        <br />
        <br />
        <p class="text3">如果你准备好了<br />点击此区域加入我们</p>
      </div>
    </div>
  </div>
</template>

<script>
import { ref,} from "vue";
import {useRouter,useRoute} from "vue-router"
export default {
  setup() {
    const imgList = ref([
      "https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&hs=0&pn=0&spn=0&di=84260&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=1719063513%2C2559625643&os=3428769622%2C502085381&simid=3425131725%2C175063916&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E5%9B%BE%E7%89%87&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2014%2F0829%2Fb871e1addf5f8e96f3b390ece2b2da0d.jpg%26refer%3Dhttp%3A%2F%2Ffile02.16sucai.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1640654049%26t%3D56d488981595f9ef2f3bb6be5a0c37c5&fromurl=ippr_z2C%24qAzdH3FAzdH3F8mf7vwt_z%26e3Bv54AzdH3Fda89AzdH3FabAzdH3F900d9_z%26e3Bip4s&gsm=1&islist=&querylist=&dyTabStr=MCwzLDEsNiw0LDIsNSw3LDgsOQ%3D%3D",
      "https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&hs=0&pn=2&spn=0&di=226050&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=3666548066%2C2508071679&os=781744667%2C2836669055&simid=3666548066%2C2508071679&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E5%9B%BE%E7%89%87&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F53%2F0a%2Fda%2F530adad966630fce548cd408237ff200.jpg%26refer%3Dhttp%3A%2F%2Fup.enterdesk.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1640654049%26t%3D95f850747c0c6969e4de90db5c1e59df&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bjgpj61jfh_z%26e3Bv54AzdH3F15ogs5w1AzdH3Fcnmd9-dl8b8c&gsm=1&islist=&querylist=&dyTabStr=MCwzLDEsNiw0LDIsNSw3LDgsOQ%3D%3D",
    ]);
    const router = useRouter()
    const showNext = () => {

      router.push('/video')
    };
    return {
      imgList,
      showNext,
    };
  },
};
</script>

<style scoped>
.login {
  background-color: #543432;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
.clik-area {
  position: absolute;
  height: 80vh;
  width: 80vh;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  cursor: pointer;
}
.clik-area-bg {
  height: 100%;
  width: 100%;
  /* background-color: gray; */

  opacity: 0.9;
  backdrop-filter: grayscale(1);
  /* box-shadow: 4px 3px 3px 13px grey; */
  border-radius: 50%;
}
.clik-area-text{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold;
}
.text1 {
  color: red;
  font-size: 48px;
}
.text2{
color: #fff;
font-size: 32px;
}
.text3{

color: #fff;
font-size: 28px;
}
</style>
